<script setup lang="tsx">
import { useLogStore } from '@/store/log'
import { instance } from '@/utils/request'
import { ElSwitch } from 'element-plus'
import { ref } from 'vue'

const logStore = useLogStore()

const tableColumns = [
  { prop: 'id', label: '编号', minWidth: 80, fixed: 'left' },
  // { prop: 'position', label: '通知位置' },
  { prop: 'message', label: '通知内容', minWidth: 180 },
  { prop: 'createTime', label: '通知时间', minWidth: 160 },
  {
    prop: 'status',
    label: '通知状态',
    fixed: 'right',
    minWidth: 160,
    formatter(row) {
      return (
        <div
          onClick={() => {
            logStore.updateLog({ id: row.id, status: row.status === '0' ? '1' : '0' })
          }}
        >
          <ElSwitch
            modelValue={row.status}
            active-value="1"
            inactive-value="0"
            active-text="已处理"
            inactive-text="未处理"
          ></ElSwitch>
        </div>
      )
    },
  },
]

const currentVolume = ref(0)

const disabled = ref(false)

const getVolume = async () => {
  disabled.value = true
  const { data } = await instance({ url: `/warn/light/v1/show`, method: 'get' })
  currentVolume.value = data
  disabled.value = false
}

// getVolume()

const changeVolume = async (newVal, oldVal) => {
  if (newVal > oldVal) {
    await instance({ url: `/warn/light/v1/increase`, method: 'get' })
    await getVolume()
  } else {
    await instance({ url: `/warn/light/v1/reduce`, method: 'get' })
    await getVolume()
  }
}

const openWarnLight = async () => {
  await instance({ url: `/warn/light/v1/open`, method: 'get' })
}

const closeWarnLight = async () => {
  await instance({ url: `/warn/light/v1/close`, method: 'get' })
}
</script>

<template>
  <ElDrawer :size="840" title="声光报警灯控制">
    <div class="h-full flex flex-col gap-4">
      <div class="flex items-center">
        <div>当前音量：</div>
        <ElInputNumber
          v-model="currentVolume"
          :disabled="disabled"
          size="small"
          :min="0"
          :max="30"
          @change="changeVolume"
        />
      </div>
      <div class="flex items-center">
        <div>报警开关：</div>
        <ElButton color="#4e648763" size="small" @click="openWarnLight">开启报警灯</ElButton>
        <ElButton color="#4e648763" size="small" @click="closeWarnLight">强制关闭报警灯</ElButton>
      </div>
      <div class="font-bold">异常通知列表</div>
      <ElTable :data="logStore.logList" height="100%" stripe>
        <template v-for="col in tableColumns" :key="col.prop">
          <ElTableColumn v-bind="col" align="center"></ElTableColumn>
        </template>
      </ElTable>
      <ElPagination
        v-model:current-page="logStore.logListPaging.currentPage"
        v-model:page-size="logStore.logListPaging.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :small="true"
        :background="true"
        :total="logStore.logListPaging.total"
        @current-change="logStore.getLogList"
        @size-change="logStore.getLogList"
      ></ElPagination>
    </div>
  </ElDrawer>
</template>
